<template>
  <section class="success">
    <div class="box" >
      <div
        class="intro"
        v-for="item of successItem"
        :key="item.id"
        @click="handle(item.id)"
      >
        <img :src="item.imgUrl1"/>
        <p :class="{active: num === item.id}">{{item.name}}</p>
      </div>
    </div>
    <success-case-son :CaseData="CaseData"/>
  </section>
</template>

<script>
import { mapState } from 'vuex'
import SuccessCaseSon from './components/Case'
export default {
  name: 'SuccessCase',
  components: {
    SuccessCaseSon
  },
  data () {
    return {
      CaseData: {},
      num: 0
    }
  },
  computed: {
    ...mapState(['successItem'])
  },
  created () {
    this.getCaseData(this.num)
  },
  methods: {
    getCaseData (num) {
      this.axios.get('/consultItem/0')
        .then((res) => {
          console.log(res)
          let data = res.data
          for (let i in data) {
            for (let j in data[i]) {
              if (j == num) {
                console.log(data[i][num])
                this.CaseData = data[i][num]
              }
            }
          }
        })
    },
    handle (id) {
      this.num = id
      this.axios.get('/consultItem/0')
        .then((res) => {
          console.log(res)
          let data = res.data
          for (let i in data) {
            for (let j in data[i]) {
              if (j == id) {
                console.log(data[i][id])
                this.CaseData = data[i][id]
              }
            }
          }
        })
    }
  }

}
</script>

<style lang="stylus" scoped>
  .active
    color #eb5772!important
  .success
    background #fff
    width: 100%
    min-height 100vh
    position: relative
    .box
      display flex
      justify-content space-around
      width 100%
      padding 30px 20px 40px
      text-align center
      box-sizing border-box
      border-bottom 1px solid #ecebeb
      .intro
        width 44%
        background #f4f4f4
        img
          width 100%
          height 200px
        p
          font-size 28px
          color #7d7d7d
          padding 18px 0
</style>
